In this blog , I’m explaining how to make Accordion using Bootstrap in ASP.Net
Example :-
In This Example we Create Accordion With Help BootStrap File
Form Design:-
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Accordion.aspx.cs"Inherits="AutoComplete"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
<linkhref="Content/LoginStyle.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
<h1>Accordion</h1>
<divid="Accordion">
<divstyle="width: 300px;">
<h1style="height: 40px">My Programmes</h1>
<div>
<p>GNIIT</p>
<p>DIT</p>
<p>B.Sc IT</p>
</div>
</div>
<divstyle="width: 300px;">
<h1style="height: 40px">MyServices</h1>
<div>
<p>Web Application Developement</p>
<p>Android Application Developement</p>
</div>
</div>
<divstyle="width: 300px">
<h1style="height: 40px">ContactUs</h1>
<div>
<p>99999999999</p>
</div>
</div>
<divstyle="width: 300px">
<h1style="height: 40px">FeedBack</h1>
<div>
<p>99999999999</p>
</div>
</div>
</div>
</form>
</body>
</html>
<scripttype="text/javascript">
$(document).ready(function () {
$("#Accordion").accordion({
header: "h1"
});
});
</script>
Firstly create <div> tag give id Accordion then create three sud <div> tag of Accordion<div> tag then create one <h1> tag and one <div> tag inside every sub <div>tag then call accordion() method on Accordion <div> tag click Inside $(document).ready(function () {} function.
Use this BootStrap File :-
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
Download and add the above three files into your projects because it’s
mandatory for using the bootstrap libraries and methods.
Use accordion Method :-
<script type="text/javascript">
$(document).ready(function () {
$("#Accordion").accordion({//acordion method
header: "h1"
});
});
</script>
Output
in my next post i'll explain about Date Picker using BootStrap in ASP.Net
Anonymous User
18-Feb-2019Good Blog.